<template>
  <div>
    <div class="box-tab-content" v-if="showPos">
      <div class="active"><span v-for="item in cardList" :key="item.activeType" @click="handleChangeCard(item)" :class="[isActiveType === item.activeType ? 'selected' : '' ]">{{item.name}}</span></div>
      <div class="active_wrap active_flex" v-if="isActiveType === 2">
        <sum-panel :labelMap="sumLabel" :sumInfo="sumInfoAll"></sum-panel>
      </div>
      <div class="active_wrap" v-if="isActiveType === 0">
        <sum-panel :labelMap="sumTuanLabel" :sumInfo="sumTuanInfoData"></sum-panel>
      </div>
      <div class="active_wrap" v-if="isActiveType === 1">
        <sum-panel :labelMap="sumPosLabel" :sumInfo="posSumInfoData"></sum-panel>
      </div>
    </div>
    <div v-else>
      <sum-panel :labelMap="sumLabel" :sumInfo="sumInfoAll"></sum-panel>
    </div>
  </div>
</template>
<script>
import dailyBillMix from '@/views/finance/mixins/dailyBill';
export default {
  mixins:[ dailyBillMix ],
  props: {
    sumInfoAll: {
      type: Object
    },
    sumTuanInfoData: {
      type: Object
    },
    posSumInfoData: {
      type: Object
    },
    // 全部汇总-1 团油收单汇总-2 POS收单汇总-5
    isActiveType: {
      type: Number,
      default: 0
    },
    showPos: {
      type: Boolean
    }
  },
  data () {
    return {
      cardList: [
        { name: '全部汇总', activeType: 2, interestCode: 'all' },
        { name: '团油收单汇总', activeType: 0, interestCode: 'tuan' },
        { name: 'POS收单汇总', activeType: 1, interestCode: 'pos' }
      ],
    }
  },
  methods: {
    // 切换活动类型卡片
    handleChangeCard ({ activeType }) {
      this.$emit('handleChangeType', activeType)
    },
  }
}
</script>
<style scoped lang="less">
  .box-tab-content{
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    .active{
      position: absolute;
      top: 1px;
      z-index: 10;
      >span{
        display: inline-block;
        width: 130px;
        height: 40px;
        font-size:16px;
        font-family: PingFangSC-Bold, PingFang SC;
        margin-right: 5px;
        border:1px solid #DCDFE6;
        border-radius: 15px 15px 0 0;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
      .selected{
        background: #fff;
        color: #000;
        border-bottom: none;
      }
    }
    .active_wrap{
      padding: 20px 10px;
      margin-top: 40px;
      width: 100%;
      border:1px solid #DCDFE6;
      background: #fff;
      .box-card{
        height: 150px;
        width: 30%;
        .active_count{
          display: flex;
          justify-content: space-around;
          align-items: center;
          .word{
            >span:nth-child(1){
              color: #4B7FFC;
              font-size: 18px;
              font-weight: bold;
              margin-bottom: 10px;
            }
            >span:nth-child(2){
              color: #909399;
              font-size: 14px;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
    .active_flex {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
</style>